<template>
  <div class="user-page">
    <span class="user-header">
      <div class="user-avatar"></div>
      <div class="user-info">
        <h2>未登录</h2>
      </div>
    </span>

    <span class="nav-container">
      <div class="nav-item">
        <router-link to="/history" class="nav-link">
          <van-icon name="clock-o" />
          <span>历史记录</span>
        </router-link>
      </div>
      <div class="nav-item">
        <router-link to="/collections" class="nav-link">
          <van-icon name="like-o" />
          <span>我的收藏</span>
        </router-link>
      </div>
      <div class="nav-item">
        <router-link to="/likes" class="nav-link">
          <van-icon name="like" />
          <span>我的点赞</span>
        </router-link>
      </div>
    </span>

    <div class="user-menu">
      <router-link to="/recommendations" class="menu-item">
        <span>推荐分享</span>
        <van-icon name="arrow-right" />
      </router-link>
      <router-link to="/feedback" class="menu-item">
        <span>意见反馈</span>
        <van-icon name="arrow-right" />
      </router-link>
      <router-link to="/about" class="menu-item">
        <span>关于我们</span>
        <van-icon name="arrow-right" />
      </router-link>
      <button @click="logout" class="menu-item">
        <span>退出登录</span>
        <van-icon name="arrow-right" />
      </button>
    </div>
  </div>
</template>

<script>
//
import { Icon } from "vant";

export default {
  name: "HmUser",
  components: {
    [Icon.name]: Icon,
  },
  data() {
    return {};
  },
  methods: {
    async logout() {
      // 清除 token 并重定向到登录页面
      localStorage.removeItem("token");
      this.$router.push("/login");
    },
  },
};
</script>

<style scoped>
.user-page {
  padding: 20px;
}

.user-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.user-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 20px;
  background-image: url(/src/assets/logo2.png);
  background-size: cover; /* 使背景图片覆盖整个元素 */
  background-position: center; /* 将背景图片居中 */
  background-repeat: no-repeat; /* 防止背景图片重复 */
}

.user-info {
  flex: 1;
  text-align: left;
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33.33%;
  padding: 10px;
  text-align: center;
}

.nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #333;
  text-decoration: none;
}

.nav-link span {
  margin-top: 5px;
}

.user-menu {
  margin-top: 20px;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
  color: #333;
  text-decoration: none;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item span {
  margin-right: 10px;
}
.nav-container {
  display: flex;
  justify-content: space-around; /* 或者使用 space-between, flex-start, flex-end 等 */
  align-items: center;
}

.nav-item {
  margin: 0 10px; /* 可选：添加间距 */
}
</style>
